<!doctype html>
<html lang="en" class="dark font-sans antialiased">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="/component.css" rel="stylesheet" />
    <script src="/component.js" defer></script>
  </head>
  <body class="mx-auto max-w-md p-6">
    <a href="#" class="relative block rounded-tr-3xl border border-gray-100">
      <span
        class="absolute -top-px -right-px rounded-tr-3xl rounded-bl-3xl bg-rose-600 px-6 py-4 font-medium tracking-widest text-white uppercase"
      >
        Save 10%
      </span>

      <img
        src="https://images.unsplash.com/photo-1485955900006-10f4d324d411?auto=format&fit=crop&q=80&w=1160"
        alt=""
        class="h-80 w-full rounded-tr-3xl object-cover"
      />

      <div class="p-4 text-center">
        <strong class="text-xl font-medium text-gray-900"> Aloe Vera </strong>

        <p class="mt-2 text-pretty text-gray-700">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet officia rem vel voluptatum
          in eum vitae aliquid at sed dignissimos.
        </p>

        <span
          class="mt-4 block rounded-md border border-indigo-900 bg-indigo-900 px-5 py-3 text-sm font-medium tracking-widest text-white uppercase transition-colors hover:bg-white hover:text-indigo-900"
        >
          Buy now
        </span>
      </div>
    </a>
  </body>
</html>
